<template>
  <div class="register">
    <div class="regbox">
      <div class="reg-title">
        <h2>商标专用权质权登记</h2>
      </div>
      <div class="reg-form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="200px"
          class="demo-ruleForm"
        >
          <el-form-item label="质权人名称（中文）：" prop="pledgee">
            <el-input v-model="ruleForm.pledgee" disabled></el-input>
          </el-form-item>
          <el-form-item label="出质人名称（中文）：" prop="pledgor">
            <el-input v-model="ruleForm.pledgor" disabled></el-input>
          </el-form-item>
          <el-form-item label="是否共有商标：">
            <el-radio-group v-model="ruleForm.status_mark">
              <el-radio label="1">是</el-radio>
              <el-radio label="0">否</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="代理机构名称：" prop="agency">
            <el-input v-model="ruleForm.agency" disabled placeholder="成都商标代理窗口"></el-input>
          </el-form-item>
          <el-form-item label="出质商标注册号：" prop="reg_number">
            <el-input v-model="ruleForm.reg_number" placeholder="出质商标注册号"></el-input>
          </el-form-item>
          <el-form-item label="担保债权数额：" prop="amount_sec">
            <el-input v-model="ruleForm.amount_sec" placeholder="担保债权数额"></el-input>
          </el-form-item>
          <el-form-item label="质权登记期限：" prop="reg_term">
            <el-input v-model="ruleForm.reg_term" placeholder="质权登记期限"></el-input>
          </el-form-item>
          <base-upload @getFile="getFile"></base-upload>
        </el-form>
      </div>
      <div class="r-f-sutbox">
        <button class="r-f-sut" @click="subForm">提交</button>
      </div>
    </div>
  </div>
</template>

<script>
import BaseUpload from "@/components/base-component/BaseUpload";
export default {
  name: "register",
  data() {
    return {
      ruleForm: {
        agency: "",
        amount_sec: "",
        confirmImgs: [],
        docImgs: [],
        pledgee: "",
        pledgor: "",
        reg_number: "",
        reg_term: "",
        status_mark: "1",
      },
      rules: {
        pledgee: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        pledgor: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        agency: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        reg_number: [{ required: true, message: "字段不能为空", trigger: "blur" } ],
        amount_sec: [{ required: true, message: "字段不能为空", trigger: "blur" }],
        reg_term: [{ required: true, message: "字段不能为空", trigger: "blur" }],
      },
      formData: new FormData()
    };
  },
  components:{
    BaseUpload,
  },
  methods: {
    getFile(data,data2){
      // console.log(data1);
      // console.log(data2);
      this.ruleForm.confirmImgs = data2;
      this.ruleForm.docImgs = data;
    },
    subForm(){
      var config = {
        header: {
          "Content-Type": "multipart/form-data"
        }
      };
      for (var i = 0; i < this.ruleForm.confirmImgs.length; i++) {
        this.formData.append("confirmImgs", this.ruleForm.confirmImgs[i]);
      }
      for (var a = 0; a < this.ruleForm.docImgs.length; a++) {
        this.formData.append("docImgs", this.ruleForm.docImgs[a]);
      }
      this.formData.append("agency", this.ruleForm.agency);
      this.formData.append("amount_sec", this.ruleForm.amount_sec);
      this.formData.append("pledgee", this.ruleForm.pledgee);
      this.formData.append("pledgor", this.ruleForm.pledgor);
      this.formData.append("reg_number", this.ruleForm.reg_number);
      this.formData.append("reg_term", this.ruleForm.reg_term);
      this.formData.append("status_mark", this.ruleForm.status_mark);
      this.$http
        .post(
          "http://192.168.0.102:8080/proTPledge/update",
          this.formData,
          config
        )
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
        // console.log(this.ruleForm);
    }
  },
};
</script>

<style scoped lang="less">
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ {
  opacity: 0;
}
i,
em {
  font-style: normal;
}
.register {
  width: 100%;
  background-color: #e7e8eb;
  .regbox {
    width: 1240px;
    margin: 0 auto;
    background-color: #fff;
    padding: 20px;
    .reg-title {
      padding: 15px 20px;
      text-align: center;
      border-bottom: 1px solid #e7e8eb;
      h2 {
        font-size: 22px;
        font-weight: 300;
      }
    }
    .reg-form {
      width: 700px;
      margin-left: 120px;
      .el-form-item {
        margin-top: 50px;
      }
    }
    .r-f-sutbox {
      margin-top: 50px;
      text-align: center;
      .r-f-sut {
        padding: 12px 20px;
        color: #fff;
        border: none;
        outline: none;
        border-radius: 5px;
        cursor: pointer;
        background-color: #67c23a;
      }
    }
  }
}
</style>
